<!--
 * @Description:: 育小帮科技有限公司
 * @Version: 1.0
 * @Author: smallWhite
 * @Date: 2023-02-14 10:32:02
 * @LastEditors: smallWhite
 * @LastEditTime: 2023-06-10 15:13:24
 * @FilePath: /siana_admin/src/views/stableDiffusion/sdModel/components/modal.vue
-->
<template>
  <!--弹窗-->
  <el-dialog :title="title"
    :visible.sync="dialogVisible"
    width="500px"
    :fullscreen="phone"
    :close-on-click-modal="false"
    :before-close="handleClose"
    class="upload_box">
    <!--form-->
    <el-form ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      :label-position="position"
      label-width="100px">
      <el-form-item
        label="模型名称"
        prop="modelName">
        <!--下拉列表-->
        <el-input
          v-model="ruleForm.modelName"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item label="图片"
        prop="imgUrl">
        <!--下拉列表-->
        <el-upload
          class="avatar-uploader"
          :action="action"
          :headers="headers"
          :on-success="handleSuccess"
          :show-file-list="false">
          <img
            v-if="ruleForm.imgUrls"
            :src="ruleForm.imgUrls"
            class="avatar" />
          <i v-else
            class="el-icon-upload avatar-uploader-icon"></i>
        </el-upload>
        <el-input
          v-show="false"
          v-model="ruleForm.imgUrl"
          style="width:100%;max-width: 600px;" />
      </el-form-item>
    </el-form>
    <!-- 表单结束 -->
    <!--操作按钮-->
    <span slot="footer"
      class="dialog-footer">
      <el-button
        @click="handleClose">取
        消</el-button>
      <!--确定-->
      <el-button
        type="primary"
        :disabled="loading"
        @click="handleSubmit"><i
          v-if="loading"
          class="el-icon-loading"></i>确
        定</el-button>
    </span>
  </el-dialog>
  <!--弹窗 end-->
</template>

<script>
import { HTTP_URI } from '@/api_new/api'
// 引入组件及方法
export default {
  name: 'Yxb3NewModal',

  data() {
    return {
      phone: false,
      type: 'numberTimes',
      // checked: false, //是否覆盖数据
      loading: false, // loading状态
      dialogVisible: false, // 弹窗显隐状态
      // 标题
      position: 'right',
      action: HTTP_URI.UPLOADIMG,
      headers: {
        token: window.localStorage.getItem('token')
      },
      title: '', // 弹窗标题
      // 表单
      ruleForm: {
        modelName: '',
        imgUrls: '',
        imgUrl: ''
      },
      // 校验规则
      rules: {
        modelName: [{ required: true, message: '请输入', trigger: 'change' }],
        imgUrl: [{ required: true, message: '请上传', trigger: 'change' }]
      }
    }
  },

  //  初始化
  mounted() {
    this.phone = JSON.parse(window.localStorage.getItem('phone'))
    this.position = this.phone == true ? 'top' : 'right'
  },

  methods: {
    // 弹窗信息设置
    open(page, data) {
      this.phone = JSON.parse(window.localStorage.getItem('phone'))
      this.dialogVisible = true
      if (page == 'add') {
        this.title = '添加'
      } else {
        this.title = '编辑'
        this.ruleForm = data
      }
    },
    getApi(api) {
      this.$https(api, this.ruleForm).then(res => {
        this.$message.success(this.title + '成功')
        this.handleClose()
        this.$emit('ok')
      })
    },
    handleClose() {
      this.ruleForm = {
        name: '',
        price: '',
        numberTimes: '',
        sort: 0,
        stock: 0
      }
      this.dialogVisible = false
    },
    handleSuccess(res, file) {
      console.log(res.data)
      this.ruleForm.imgUrl = res.data.filePatch
      this.ruleForm.imgUrls = res.data.imageUrl
    },
    // 提交
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.title == '添加') {
            this.getApi('SDMODELADD')
          } else {
            this.getApi('SDMODELUPDATE')
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px !important;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
</style>

